<template>
<div>
	<div style="background-color: #1296db;height:5vh;display: flex;align-items: center;justify-content:space-around">
	    <div>
			<el-button @Click="loin()">首页</el-button>
	        </div>
	    <div style="dispaly:flex;">
			    <el-button  v-if="store.state.user.uname!=null">姓名:{{store.state.user.uname}}</el-button>
			  
				 <!-- <el-row class="demo-avatar demo-basic">
				      <el-col ><div><h3>头像:</h3></div>  
				        <div class="demo-basic--circle">
				  		
				          <div  class="block">
				            <el-avatar :size="60" v-bind:src="`/api/public/findAllimg/`+store.state.user.pic" />
				          </div>
				        </div>
				      </el-col>
				    </el-row>	 -->
			<el-popover
			    :visible="visible"
			    placement="bottom"
			    :width="600"
				:height="400">
				
			  <el-form
			      ref="ruleFormRef"
			      style="max-width: 600px;height: 20vh;
			  	background-color: #dadada;"
			      :model="ruleForm"
			      :rules="rules"
			      label-width="auto"
			      class="demo-ruleForm"
			      :size="formSize"
			      status-icon
			    >
				
			      <el-form-item label="账号:" prop="name">
			        <el-input v-model="data.user.username" placeholder="请输入账号" />
			      </el-form-item>
			      <el-form-item label="密码:" prop="password" >
			        <el-input v-model="data.user.password" placeholder="请输入密码" />
			      </el-form-item>
			      <el-form-item>
			            <el-button type="primary" @click="login(data.user)">
			              登录
			            </el-button>
			            <el-button @click="visible=false">取消</el-button>
			          </el-form-item>
			    </el-form>
			    <template #reference>
			      <el-button class="m-2" @click="visible = !visible">
			        登录
			      </el-button>
			    </template>
			  </el-popover>
	        
	        <el-button @Click="register()">注册</el-button>
	        <el-button @Click="my()">认证会员</el-button>
	        <el-button @Click="orditem()">我的订单</el-button>
			<el-button @Click="my()">我的</el-button>
			 <el-dropdown  >
			      <el-button> 更多 </el-button>
			      <template #dropdown>
			        <el-dropdown-menu>
			          <el-dropdown-item  @Click="cart()">我的购物车</el-dropdown-item>
			          
			        </el-dropdown-menu>
			      </template>
			    </el-dropdown>
	    </div>
		
	    <div >
			<el-button @Click="exit()">退出</el-button>
	    </div>
	</div>
		<div style="display: flex;justify-content: center;">
			<div style="width: 100%">
				<router-view></router-view>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
	import {ref,reactive,onMounted,computed,toRefs} from "vue"
	import {$get,$postj,$postx,$postf} from "./ajax/index.js"
	import axios from 'axios'
	import store from "./store/index.js"
	import router from "./router/index.js"
	import {Check,Delete,Edit,Message,Search,Star,} from '@element-plus/icons-vue'
	const visible = ref(false)
	import type { ComponentSize, FormInstance, FormRules,ElMessage } from 'element-plus'
	
	
	const options = Array.from({ length: 10000 }).map((_, idx) => ({
	  value: `${idx + 1}`,
	  label: `${idx + 1}`,
	}))
	const data=reactive({
		goods:{},
		user:{},
	})
	
	onMounted(()=> {
		const uname =window.localStorage.getItem("uname");
		store.state.user.uname=uname;
		const role =window.localStorage.getItem("role");
		store.state.user.role=role;
		const pic =window.localStorage.getItem("pic");
		store.state.user.pic=pic;
		const token =window.localStorage.getItem("tokens");
		store.state.user.token=token;
				
		
			router.push("/login");
	})
	// 跳转到首页
	function loin(){
		router.push("/login");
	}
	function login(){
		console.log("username==")
		console.log(data.user.username)
		console.log("password==")
		console.log(data.user.password)
		
		console.log(JSON.stringify(data.user))
		
		$postx("/api/login",data.user)
		.then((resp) =>{
			console.log(resp.data.data)
			window.localStorage.setItem("token",resp.data.data) //拿到token
			$get("/api/user/info")
			.then((resp) =>{
				console.log("公共==")
				console.log(resp.data.data)
				store.state.user =resp.data.data;
				console.log("store.state.user==")
				console.log(store.state.user)
				console.log("store.state.user.uname==")
				console.log(store.state.user.uname)
				
				data.bshow = false;
				 window.localStorage.setItem("role",store.state.user.role);
				// this.$router.push("/" + this.$store.state.user.role)
				
				if(store.state.user.role == 'adm'){
					// this.$store.state.user.username = this.$store.state.user.uname
					store.state.user.role ="管理员";
					router.push('/adm');
				}
				if(store.state.user.role == 'buyer'){
					// this.$store.state.user.username = this.$store.state.user.uname
					store.state.user.role ="卖家";
					router.push('/buyer');
				}
				ElMessage({
					message: "登陆成功！",
					type: 'success',
				})
				 visible.value = false;
			})
		})
	}
	function register(){
		router.push('/register');
	}
	// 跳转到我的订单
	function orditem(){
		router.push('/orditem');
	}
	// 跳转到个人中心页面
	function my(){
		router.push('/homejd');
	}
	// 跳转到购物车页面
	function cart(){
		router.push("/rat");
	}
	//退出到首页
	function exit(){
		store.state=null;
		router.push("/login");
		ElMessage({
			message: "退出成功!!!",
			type: 'success',
		})
	}
</script>

<style scoped>
</style>
